<template>
	<div class="list-wrapper">
		<div class="list-top">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="培训" name="Apply">
					 <table class="list-table" border="0" cellspacing="0" cellpadding="0">
					 	<thead>
                            <tr>
                                <th>序号</th>
                                <th>姓名</th>
                                <th>联系电话</th>
                                <th>报班课程</th>
                                <th>开班日期</th>
								<th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                        	<tr v-for="(item,index) in list">
                        		<td>
									<img src="../../img/edit.gif" alt="" @click="edit(item.id)">
									<span>{{index+1}}</span>
								</td>
                        		<td>{{item.name}}</td>
                        		<td>{{item.tel}}</td>
                        		<td>{{item.course}}</td>
                        		<td>{{item.startdate}}</td>
								<td>{{item.remark}}</td>
                        	</tr>
                        </tbody>
					 </table>
					 <el-dialog title="" :visible.sync="dialogFormVisible" size="tiny">
						<el-form :model="form">
							<el-form-item label="备注" label-width="50px">
								<el-input type="textarea" :rows="5" v-model="form.remark"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="sub">确 定</el-button>
						</div>
					</el-dialog>
				</el-tab-pane>
				<el-tab-pane label="Email" name="Email">
					<table class="list-table" border="0" cellspacing="0" cellpadding="0">
						<thead>
							<tr>
								<th width="20%">序号</th>
								<th>邮箱</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<td>{{index+1}}</td>
								<td>{{item.email}}</td>
							</tr>
						</tbody>
					</table>
				</el-tab-pane>
        <el-tab-pane label="微信注册" name="Wx">
					<table class="list-table" border="0" cellspacing="0" cellpadding="0">
						<thead>
							<tr>
								<th width="20%">序号</th>
                <th>姓名</th>
								<th>手机号</th>
                <th>身份证号</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<td>{{index+1}}</td>
                <td>{{item.name}}</td>
								<td>{{item.tel}}</td>
                <td>{{item.idcard}}</td>
							</tr>
						</tbody>
					</table>
				</el-tab-pane>
			</el-tabs>
		</div>
		 <el-pagination class="namtc-pagination" @current-change="handleCurrentChange" :current-page="page" :page-size="10" layout="total, prev, pager, next, jumper" 
     :total="total">
      </el-pagination>
	</div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "Apply",
      page: 1,
      total: 0,
      list: [],
      dialogFormVisible: false,
      form: {
        remark: ""
      },
      id: ""
    };
  },

  created() {
    this.getList();
  },

  methods: {
    handleClick(tab) {
      this.page = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    getList() {
      let data = {
        page: this.page
      };
      this.apiPost("trainee/trainee" + this.activeName, data).then(res => {
        this.list = res.list||[];
        this.total = res.total||0;
      });
    },
    edit(id) {
      let data = {
        id: id
      };
      this.apiPost("trainee/traineeApplyDetail", data).then(res => {
        this.form.remark = res.remark;
        this.id = res.id;
        this.dialogFormVisible = true;
      });
    },
    sub() {
      this.dialogFormVisible = false;
      let data = {
        id: this.id,
        remark: this.form.remark
      };
      this.apiPost("trainee/traineeApplyEdit", data).then(res => {
        if (!res.error) {
          _g.toastMsg("success", res.msg);
          this.getList();
        } else {
          _g.toastMsg("error", res.msg);
        }
      });
    }
  }
};
</script>

<style scoped>

</style>